<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="../../mofumui/mofumui.js" ></script>
	</head>
	<body>
		<script type="text/javascript">
			//设置JS路由
			mofum.setPrefix("../../");
			mofum.imports(["MFrame","MWIETransition"],function(MFrame,MWIETransition){
				
				//创建框架
				var frame = new MFrame();
				
				var parent = new  MWIETransition().setSize(100,100).setBackground("#ff0");
				
				//添加过渡属性
				parent.transition(["height","width","opacity"],1000);
				
				//调用setStyle来修改过渡内容，最后使用start触发过渡效果
				
				//注意 setOpaque函数将不支持过渡效果，如果你想要渐隐渐显你可以使用下面的方式。
				parent.handleHover(function(){
					//IE10以上的浏览器则是使用原生CSS。IE5-IE9则是使用动画模拟的过渡效果
					parent.setSize(300,200).setStyle("opacity","0.3").start();
				},function(){
					//IE10以上的浏览器则是使用原生CSS。IE5-IE9则是使用动画模拟的过渡效果
					parent.setSize(100,100).setStyle("opacity","1").start();
				})
				
				//设置文本
				frame.append(parent);
				
			});
			
		</script>
	</body>
</html>
